<#cenluan title="上传照片" menu="gallery" uploader="WebUploader">
	<ol class="breadcrumb">
		<li><a href="/gallery">相册</a></li>
		<li>${gallery.html}</li>
		<li>上传照片</li>
	</ol>
	<p id="picker" class="hide">点击上传图片</p>
	<div class="row">
		<div class="col-md-4">
			<button id="btn-picker" class="btn btn-success btn-block mb20">
				<span class="glyphicon glyphicon-folder-open"></span>&nbsp;点击选择照片
			</button>
		</div>
		<div class="col-md-4">
			<button class="btn btn-default btn-block mb20" id="btn-start" style="display:none;">
				<span class="glyphicon glyphicon-upload"></span>&nbsp;全部开始
			</button>
		</div>
	</div>
	<div class="row" id="dndArea"></div>
	
	<script>
		
		$(function() {
			var UPLOADER = WebUploader.create({
				swf : "/static/ext/WebUploader/Uploader.swf",
				server : "/photo/save/${gallery.id}",
				pick : {
					id : "#picker",
					multiple : true
				},
				//接收的文件类型
				accept : {
					title : "Images",
					extensions : "gif,jpg,jpeg,bmp,png",
					mimeTypes : 'image/*'
				},
				fileNumLimit : 50,
				fileSingleSizeLimit : 10 * 1024 * 1024,
				sendAsBinary : true,
				//缩略图
				thumb : {
					width : 300,
					height : 300,
					quality : 100,
					allowMagnify : false,
					crop : true,
					type : 'image/jpeg',
					compressSize : 1024 * 500
				},
				//上传图片压缩
				compress : {
					width : 1600,
					height : 1600,
					quality : 90,
					allowMagnify : false,
					crop : false,
					preserveHeaders : true,
					noCompressIfLarger : true,

				},
				duplicate : true
			});
			//uploader统计信息检查，如果上传失败、上传中和队列中的文件加一起是0，重置uploader
			//并且显示重新上传按钮，让用户继续上传
			function statsCheck() {
				var stats = UPLOADER.getStats();
				var num = stats.progressNum + stats.uploadFailNum + stats.queueNum;
				if (num==0) {
					UPLOADER.reset();
					$("#btn-picker").show();
					$("#btn-start").hide();
				}
			}
			//选择照片按钮
			$("#btn-picker").click(function() {
				$("input[type='file']").trigger("click");
			});
			//开始上传按钮
			$("#btn-start").click(function() {
				UPLOADER.upload();
				$("#btn-picker").hide();
				$(this).hide();
			});
			//删除按钮
			$("#dndArea").on("click", ".btn-del", function() {
				UPLOADER.removeFile($(this).data("id"));
				$("#" + $(this).data("id")).remove();
				statsCheck();
			});
			//重试按钮
			$("#dndArea").on("click", ".btn-retry", function() {
				UPLOADER.retry($(this).data("id"));
			});
			//加入文件，创建缩略图
			UPLOADER.on("fileQueued", function(file) {
				var template = $("<div class='col-lg-2 col-md-3 col-sm-6' id='"+file.id+"'></div>");
				var thumbnail = $("<div class='thumbnail text-center'></div>");
				template.append(thumbnail);
				UPLOADER.makeThumb(file, function(error, ret) {
					if (error) {
						thumbnail.prepend("<img src='/static/img/cant-preview.jpg'>");
					} else {
						thumbnail.prepend("<img src='"+ret+"'>");
					}
				});

				thumbnail.append("<div class='caption'><button class='btn btn-default btn-del' type='button' data-id='"+file.id+"'>"
						+ "<span class='glyphicon glyphicon-trash'></span>&nbsp;删除</button></div>");
				$("#dndArea").append(template);
				if ($("#btn-start").is(":hidden")) {
					$("#btn-start").show();
				}
			});
			//加入文件失败提示
			UPLOADER.on("error", function(type) {
				var msg = "加入文件失败";
				if (type == "F_EXCEED_SIZE") {
					msg = "文件过大，不能超过10M";
				} else if (type == "Q_EXCEED_NUM_LIMIT") {
					msg = "文件总数超出限制，最多只能同时添加50张图片";
				} else if (type == "Q_EXCEED_SIZE_LIMIT") {
					msg = "文件大小超出限制";
				} else if (type == "Q_TYPE_DENIED") {
					msg = "不支持的文件格式";
				}
				alert(msg);
			});
			//文件上传中，生成进度条
			UPLOADER.on("uploadProgress", function(file, percentage) {
				var progress = $("#" + file.id).find("progress");
				if (!progress.length) {
					progress = $("<div class='progress'><div class='progress-bar' style='width: 0;'></div></div>");
					$("#" + file.id).find(".caption").empty().append(progress);
				}
				progress.children(".progress-bar").css("width", percentage * 100 + "%");
			});
			//文件上传失败事件
			UPLOADER
					.on(
							"uploadError",
							function(file, reason) {
								console.log("上传失败：" + reason);
								var caption = $("#" + file.id).find(".caption");
								caption.empty();
								caption.append("<p class='text-danger'>上传失败</p>");
								var btnGroup = $("<div class='btn-group btn-group-justified'>");
								btnGroup
										.append("<a href='javascript:;' class='btn btn-default btn-del' data-id='"
												+file.id+"'><span class='glyphicon glyphicon-trash'></span>&nbsp;"
												+ "删除</a>");
								btnGroup
										.append("<a href='javascript:;' class='btn btn-default btn-retry' data-id='"
												+file.id+"'><span class='glyphicon glyphicon-repeat'></span>&nbsp;"
												+ "重试</a>");
								caption.append(btnGroup);
							});
			//文件上传成功事件
			UPLOADER.on("uploadSuccess", function(file) {
				$("#" + file.id).find(".caption").html("<p class='text-success'>上传成功</p>")
				setTimeout(function() {
					UPLOADER.removeFile(file);
					$("#" + file.id).remove();
					statsCheck();
				}, 2000);
			});
		});
	</script>
</#cenluan>